<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科室导航</title>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>

</head>
<body>
<div  id="app">
    <el-card class="box-card" >
    <center><h1 style="color: #009688">科室导航</h1></center>
                        <div v-for=" data in depinfo">

                            <el-divider content-position="left">{{data.dept.name}}</el-divider>
                                <el-button v-for="(s,i) in data.sections" type="primary" plain style="height: 50px" @click="btn(s.id)"><span>{{s.name}}</span></el-button>
                        </div>
    </el-card>
</div>

<script>
    $.get("/SectionAndAdmin/selectAlls",function (backData) {
        app.depinfo = backData.data;
        console.log(app.depinfo)
    });

    var app = new Vue({

        el: "#app",
        data: {
            depinfo:[],
            info: []
        },
        methods: {
            btn:function (sectionid) {
                window.location.href="selectSectionTo.html?sectionid="+sectionid;
            }
        }

    });


</script>
<style type="text/css">
    #app{
        border: 1px solid #dcdfe6;
        width: 80%;
        height: 100%;
        margin: 30px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
    }

    .box-card {
        width: 100%;
        margin-bottom: 20px;
    }
</style>
</body>
</html>